<template>
    <div>
        <!-- mui 中  card.html 页面的案例 -->
        <!-- 商品轮播图区域 -->
        <!-- <div class="mui-card"> -->
				<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :img="lunbotu"></swiper>
					</div>
				</div>
			</div>


        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
				</div>
			</div>


        <!-- 商品参数区域 -->
      <div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
				</div>
				<div class="mui-card-footer">页脚</div>
			</div>

   
    </div>
</template>

<script>
//导入轮播组件
import swiper from "../subComponents/swiper.vue";

import { Toast } from 'mint-ui';
export default {
  data(){
    return {
      lunbotu:[], //用于保存后台取到的数据
      id: this.$route.params.id //获取路由上的id
    }
  },
  created(){
    this.getRotationPic();
  },
  methods:{
    //从后台获取轮播部分图片 【商品的详情图】
    getRotationPic(){
      this.$http.get("goods.json").then(result => {
        if (result.body) {
          var obj = result.body.filter(item => {
            if (item.id == this.id) {
              return item;
            }
          })[0]
          console.log(obj);

          this.lunbotu = obj.pic;

        } else {
          Toast("获取数据失败！！！")
        }
      })
    }

  },
  components:{
    swiper, //在vue中注册组件
  }
}
</script>


<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
